import React, { Component } from 'react';
import {StyleSheet,Text,View,Modal,Button,TouchableHighlight} from 'react-native';

import DeviceInfo from 'react-native-device-info';

export default class Tester extends Component{
  static navigationOptions = {
    title: '测试功能',
  };

  state = {
    modalVisible: false,
    brand:'',
    bootloader:'',
    buildNumber:'',
    ip:'',
    mac:'',
    phone:'',
    deviceId:'',
    deviceName:'',
    carrier:'',
    country:''
  };
  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }

  render() {
    return (
      <View style={{ marginTop: 22 }}>
        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            alert("Modal has been closed.");
          }}
        >
          <View style={{ marginTop: 22 }}>
            <View style={ styles.modalbox }>
              <Text style={styles.title}>设备详细信息</Text>
              <Text>手机品牌：{this.state.brand}</Text>
              <Text>设备所处国家: {this.state.country}</Text>
              <Text>应用版本号：{this.state.version}</Text>
              <Text>手机ID：{this.state.deviceId}</Text>
              <Text>运营商：{this.state.carrier}</Text>
              <Text>手机型号：{this.state.buildNumber}</Text>
              <Button title="点击关闭！！！" 
                onPress={() => {
                  this.setModalVisible(!this.state.modalVisible);
                }}
              ></Button>
            </View>
          </View>
        </Modal>

          <Button title="点击获取设备信息" 
            onPress={() => {
              this.setModalVisible(true);
            }}
          ></Button>
      </View>
    );
  }

  componentWillMount(){
    this.getDeviceInfo()
  }
  getDeviceInfo=()=>{
    this.setState({
      brand: DeviceInfo.getBrand(),
      buildNumber: DeviceInfo.getModel(),
      deviceId: DeviceInfo.getUniqueID(),
      version: DeviceInfo.getVersion(),
      deviceName: DeviceInfo.getDeviceName(),
      country: DeviceInfo.getDeviceCountry(),
      carrier: DeviceInfo.getCarrier(),
    })

    
  }
  
}

const styles = StyleSheet.create({
  modalbox:{
    padding:30,
    fontSize:20
  },
  title:{
    fontSize:20,
    color:'red'
  }
})